<template>
	<!-- 滚动说明弹窗 -->
	<view>
		<u-popup v-model="show" mode="center">
			<view class="explainBox">
				<view class="explainTitle">{{dataTitle}}</view>
				<view class="explainMain">
					<scroll-view scroll-y style="height: 400rpx;">
						<view class="explainBody">
							<view class="explaininfo" v-if="dataDetail">{{dataDetail}}</view>
							<view class="empty" v-else>
								<u-empty text="暂无说明" mode="data"></u-empty>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="explainBtn1" v-if="type == 1">
					<view class="btn" @click="submit">知道了</view>
				</view>
				<view class="explainBtn2" v-if="type == 2">
					<view class="btn btn1" @click="cancal">取消</view>
					<view class="btn" hover-class="btnHover" @click="submit">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"my-explainPopup",
		props:{
			show:{
				type:Boolean,
				default:false
			},
			dataTitle:{
				type:String,
				default:''
			},
			dataDetail:{
				type:String,
				default:''
			},
			type:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			submit(){
				this.$emit('submit')
			},
			cancal(){
				this.$emit('cancal')
			},
		}
	}
</script>

<style lang="scss" scoped>
.explainBox{
	width: 80vw;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	.explainTitle{
		font-weight: 600;
		font-size: 34rpx;
		color: #000;
		text-align: center;
		padding: 24rpx 0;
	}
	.explainBtn1{
		padding: 24rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			width: 60%;
			height: 80rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #2BA777;
			border-radius: 40rpx;
			letter-spacing: 4rpx;
			box-shadow: 0rpx 0rpx 4rpx #555;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.explainBtn2{
		padding: 24rpx 0;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		.btn{
			width: 42%;
			height: 80rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			background: #2BA777;
			border-radius: 40rpx;
			letter-spacing: 4rpx;
			box-shadow: 0rpx 0rpx 4rpx #555;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn1{
			color: #2BA777;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 4rpx #2BA777;
		}
		.btnHover{
			background: #37d898;
		}
	}
	.explainMain{
		padding: 0rpx 16rpx;
		letter-spacing: 1rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.explainBody{
			.explaininfo{
				font-weight: 400;
				font-size: 28rpx;
				color: #000;
				white-space: pre-wrap;
			}
			.empty{
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
</style>